<template>
  <div class="style_config">
    <el-row class="style_fig">
      <el-col :span="11" class="left_style" style="width: 500px">
        <affix :label="$t('configLazyLoad.channel.configPos')" class="fir_tit">
        <el-row class="config">
          <el-col :span="8">{{$t('configLazyLoad.channel.horiDirec')}}</el-col>
          <el-col :span="16">
            <el-select size="mini" v-model="inviteBox.positionX" style="width: 140px; margin-right: 20px"  :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in optionsX"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model.trim="inviteBox.distanceX" style="width: 120px" min="0" max="200" :disabled="inviteBox.positionX === 'center'" type="number" @blur="blurMar('positionX')">
              <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row class="config">
          <el-col :span="8">{{$t('configLazyLoad.channel.vertiDirec')}}</el-col>
          <el-col :span="16">
            <el-select size="mini" v-model.trim="inviteBox.positionY" style="width: 140px; margin-right: 20px" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in optionsY"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model.trim="inviteBox.distanceY" style="width: 120px" min="0" max="200" type="number" :disabled="inviteBox.positionY === 'center'" @blur="blurMar('positionY')">
              <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
            </el-input>
          </el-col>
        </el-row>
        </affix>
        <affix :label="$t('configLazyLoad.channel.iconType')">
          <el-radio-group v-model.trim="inviteBox.iconType" @change="iconTypeChange">
            <el-radio label="common">{{$t('configLazyLoad.channel.normalIcon')}}</el-radio>
            <el-radio label="adv">{{$t('configLazyLoad.channel.advIcon')}}</el-radio>
          </el-radio-group>
        </affix>
        <affix :label="$t('configLazyLoad.channel.chooseNormal')" v-if="inviteBox.iconType === 'common'">
          <span>{{$t('configLazyLoad.channel.inviteIcon')}}</span>
          <span class="chooseCommonIcon font12" @click="chooseCommonIcon">{{$t('configLazyLoad.channel.chooseIcon')}}</span>
        </affix>
        <affix :label="$t('configLazyLoad.channel.advInvite')" v-if="inviteBox.iconType === 'adv'">
          <span>{{$t('configLazyLoad.channel.inviteIcon')}}</span>
          <span class="chooseCommonIcon font12" @click="showAdvance">{{$t('configLazyLoad.channel.cusIcon')}}</span>
        </affix>
        <affix :label="$t('configLazyLoad.channel.configInviteContent')" v-if="inviteBox.iconType === 'common'">
        <el-row class="config">
          <span class="desc">{{$t('configLazyLoad.channel.inviteMessage')}}</span>
          <el-col :span="24">
            <el-input style="width: 95%" size="mini" type="textarea" v-model="inviteBox.inviteStyle.inviteWords" @blur="inviteWordsBlur"></el-input>
          </el-col>
        </el-row>
        <el-row class="config">
          <span class="desc">{{$t('configLazyLoad.channel.inputContent')}}</span>
          <el-col :span="24">
            <el-input style="width: 95%" size="mini" type="textarea" v-model="inviteBox.inviteStyle.placeholder" :maxlength="50"></el-input>
          </el-col>
        </el-row>
        </affix>
      </el-col>
      <div class="right_style">
        <div class="grid-content bg-purple">
          <p class="chatbox_des">{{$t('configLazyLoad.channel.previewEffe')}}</p>
          <p >{{$t('configLazyLoad.channel.previewTip')}}</p>
          <div class="inviteBoxPreview">
            <div class="inviteBox"
                 :style="{
                  background: !inviteBox.inviteStyle.backImg && inviteBox.inviteStyle.backColor ? inviteBox.inviteStyle.backColor: '',
                  backgroundImage:inviteBox.inviteStyle.backImg !== '' ? 'url(' + inviteBox.inviteStyle.backImg + ')' : '',
                  left: positionLeft,
                  right: positionRight,
                  top: positionTop,
                  bottom: positionBottom
                  }">
              <i class="iconfont icon-guanbi previewClose" ></i>
              <div class="inviteBox_top">
                <div class="top_img" v-if="inviteBox.inviteStyle.layoutType === '1'">
                  <img class="photo_img" :src="inviteBox.inviteStyle.photourl">
                </div>
                <div class="top_right" :class="{width100: inviteBox.inviteStyle.layoutType === '2'}">
                  <p class="Invite_words" v-html="inviteBox.inviteStyle.inviteWords"></p>
                  <div class="invite_buttons">
                    <button v-for="(btn, index) in inviteBox.inviteStyle.Buttons"
                            :style="{color : btn.color, borderColor:  btn.color, marginLeft: index === 0 ? '0': '10px'}">{{btn.text}}</button>
                  </div>
                </div>
              </div>
              <div class="inviteBox_bottom">
                <textarea class="sendtextarea" :placeholder="inviteBox.inviteStyle.placeholder"></textarea>
                <button class="sendbutton" :style="{backgroundColor: inviteBox.inviteStyle.backColor}">{{$t('webchat.send')}}</button>
              </div>
            </div>
          </div>
          <div class="save_config fl" style="margin-top: 5px;">
            <el-button type="primary" @click="saveConfig" class="primary_btn">{{$t('config.channel.saveSettings')}}</el-button>
          </div>
        </div>
      </div>
    </el-row>
    <choose-common-icon v-if="showChooseTemp" :chooseTemp="inviteBox.chooseCommonTemp" @cancel="closeChooseTemp" @saveChooseTemp="saveChooseTemp"></choose-common-icon>
    <advance-config v-if="showAdvanceConfig" :inviteBoxData="inviteBox" @cancel="closeAdvanceConfig" @saveAdvance="saveAdvance"></advance-config>
  </div>
</template>
<script>
  import affix from '../../../../../ui-modules/affix/Affix.vue'
  import chooseCommonIcon from './inviteCommonChoose.vue'
//  import {uploadTo7moorlogoImgDomain, uploadTo7moorImDomain} from '@/utils/qiniuUtils'
  import {deepClone} from '@/utils/m7Utils'
  import advanceConfig from './inviteAdvance.vue'
//  import * as uuid from 'uuid'
  export default {
    name: 'inviteBox',
    data () {
      return {
        inviteBox: {
          iconType: 'common',
          chooseCommonTemp: '',
          positionX: 'right',
          distanceX: '10',
          positionY: 'down',
          distanceY: '10',
          inviteStyle: {
            layoutType: '1',
            backColor: 'fff',
            backImg: 'https://fs-im-kefu.7moor.com/im/486e1f70-bde0-11e7-8806-e7bf8b6e8c91/2017-12-03/1512299414438/896beb70-d81a-11e7-b6e7-9da891414b0f.png',
            inviteWords: '',
            photourl: '',
            Buttons: [],
            placeholder: ''
          }
        },
        initinviteBox: {
          iconType: 'common',
          chooseCommonTemp: 'temp1',
          positionX: 'right',
          distanceX: '10',
          positionY: 'down',
          distanceY: '10',
          inviteStyle: {
            layoutType: '1',
            backColor: '#3fb8fd',
            backImg: '',
            inviteWords: this.$t('configLazyLoad.channel.welcomeWord'),
            photourl: 'https://fs-im-kefu.7moor.com/im/486e1f70-bde0-11e7-8806-e7bf8b6e8c91/2017-12-03/1512299414438/896beb70-d81a-11e7-b6e7-9da891414b0f.png',
            Buttons: [
              {
                text: this.$t('configLazyLoad.channel.ImmeConsult'),
                color: '#fff',
                action: 'openChat'
              }, {
                text: this.$t('configLazyLoad.channel.talkLately'),
                color: '#fff',
                action: 'hideInvite'
              }
            ],
            placeholder: this.$t('configLazyLoad.channel.inputContent2')
          }
        },
        optionsX: [{
          label: this.$t('configLazyLoad.channel.lookRight'),
          value: 'right'
        }, {
          label: this.$t('configLazyLoad.channel.lookMiddle'),
          value: 'center'
        }, {
          label: this.$t('configLazyLoad.channel.lookLeft'),
          value: 'left'
        }],
        optionsY: [{
          label: this.$t('configLazyLoad.channel.lookUp'),
          value: 'up'
        }, {
          label: this.$t('configLazyLoad.channel.lookMiddle'),
          value: 'center'
        }, {
          label: this.$t('configLazyLoad.channel.lookDown'),
          value: 'down'
        }],
        showChooseTemp: false,
        showAdvanceConfig: false,
        limitWidth: 0,
        limitHeight: 0
      }
    },
    props: {
      styleData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      styleData () {
        this.initData()
      }
    },
    computed: {
      positionLeft () {
        if (this.inviteBox.positionX === 'left') {
          if (parseInt(this.inviteBox.distanceX) > this.limitWidth) {
            return this.limitWidth + 'px'
          } else {
            return this.inviteBox.distanceX + 'px'
          }
        } else if (this.inviteBox.positionX === 'center') {
          return '0'
        } else if (this.inviteBox.positionX === 'right') {
          return ''
        }
      },
      positionRight () {
        if (this.inviteBox.positionX === 'right') {
          if (parseInt(this.inviteBox.distanceX) > this.limitWidth) {
            return this.limitWidth + 'px'
          } else {
            return this.inviteBox.distanceX + 'px'
          }
        } else if (this.inviteBox.positionX === 'center') {
          return '0'
        } else if (this.inviteBox.positionX === 'left') {
          return ''
        }
      },
      positionTop () {
        if (this.inviteBox.positionY === 'up') {
          if (parseInt(this.inviteBox.distanceY) > this.limitHeight) {
            return this.limitHeight + 'px'
          } else {
            return this.inviteBox.distanceY + 'px'
          }
        } else if (this.inviteBox.positionY === 'center') {
          return '0'
        } else if (this.inviteBox.positionY === 'down') {
          return ''
        }
      },
      positionBottom () {
        if (this.inviteBox.positionY === 'down') {
          if (parseInt(this.inviteBox.distanceY) > this.limitHeight) {
            return this.limitHeight + 'px'
          } else {
            return this.inviteBox.distanceY + 'px'
          }
        } else if (this.inviteBox.positionY === 'center') {
          return '0'
        } else if (this.inviteBox.positionY === 'up') {
          return ''
        }
      }
    },
    components: {
      advanceConfig,
      affix,
      chooseCommonIcon
    },
    methods: {
      iconTypeChange () {
        console.log('change')
        if (this.inviteBox.iconType === 'common') {
          this.inviteBox.inviteStyle = deepClone(this.initinviteBox.inviteStyle)
          this.inviteBox.chooseCommonTemp = 'temp1'
          if (this.inviteBox.advanceCfg) {
            this.inviteBox.advanceCfg.backgroundType = '#3fb8fd'
          }
        }
      },
      inviteWordsBlur () {
        if (this.inviteBox.inviteStyle.layoutType === '1') {
          if (this.inviteBox.inviteStyle.inviteWords.length > 22) {
            this.$message.error(this.$t('configLazyLoad.channel.dockingError2'))
          }
          this.inviteBox.inviteStyle.inviteWords = this.inviteBox.inviteStyle.inviteWords.substring(0, 22)
        } else if (this.inviteBox.inviteStyle.layoutType === '2') {
          if (this.inviteBox.inviteStyle.inviteWords.length > 30) {
            this.$message.error(this.$t('configLazyLoad.channel.dockingError3'))
            this.inviteBox.inviteStyle.inviteWords = this.inviteBox.inviteStyle.inviteWords.substring(0, 30)
          }
        }
      },
      blurMar (type) {
        if (type === 'positionX') {
          if (this.inviteBox.distanceX === '') {
            this.$message.error(this.$t('configLazyLoad.channel.dokingError7'))
            this.inviteBox.distanceX = '10'
            return
          }
          if (parseInt(this.inviteBox.distanceX) < 0) {
            this.inviteBox.distanceX = '0'
          }
        } else if (type === 'positionY') {
          if (this.inviteBox.distanceY === '') {
            this.$message.error(this.$t('configLazyLoad.channel.dokingError7'))
            this.inviteBox.distanceY = '10'
            return
          }
          if (parseInt(this.inviteBox.distanceY) < 0) {
            this.inviteBox.distanceY = '0'
          }
        }
      },
      saveAdvance (advanceStyle) {
        if (!this.inviteBox.advanceCfg) {
          this.$set(this.inviteBox, 'advanceCfg', deepClone(advanceStyle.advanceCfg))
        } else {
          this.inviteBox.advanceCfg = deepClone(advanceStyle.advanceCfg)
        }
        this.inviteBox.inviteStyle = deepClone(advanceStyle.inviteStyle)
        this.showAdvanceConfig = false
      },
      closeAdvanceConfig () {
        this.showAdvanceConfig = false
      },
      showAdvance () {
        this.showAdvanceConfig = true
      },
      initPreviewWidth () {
        this.$nextTick(() => {
          let previewClientHeight = document.getElementsByClassName('inviteBoxPreview')[0].clientHeight
          let previewClientWidth = document.getElementsByClassName('inviteBoxPreview')[0].clientWidth
          console.log(previewClientHeight, previewClientWidth)
          this.limitWidth = previewClientWidth - 320
          this.limitHeight = previewClientHeight - 175
        })
      },
      initData () {
        this.showChooseTemp = false
        this.showAdvanceConfig = false
        if (this.styleData.inviteBoxData) {
          this.inviteBox = deepClone(this.styleData.inviteBoxData)
        } else {
          this.inviteBox = deepClone(this.initinviteBox)
        }
      },
      saveConfig () {
        this.$emit('save')
      },
      chooseCommonIcon () {
        this.showChooseTemp = true
      },
      closeChooseTemp () {
        this.showChooseTemp = false
      },
      saveChooseTemp (data) {
        this.inviteBox.chooseCommonTemp = data.inviteTemp
        this.inviteBox.inviteStyle = deepClone(data.tempStyle)
        this.showChooseTemp = false
      }
    },
    // 初始化样式设置
    beforeMount () {
      this.initData()
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .style_fig
  /*height calc(100vh - 246px)*/
    /*overflow auto*/
    padding 20px 0px 40px 20px
    .save_config
      text-align right
      margin 20px -6px 0 0
    .chatbox_des
      text-align left
      font-size: 14px
      font-weight: 900
      line-height: 30px
    .fir_tit
      margin-top 14px
    .config
      margin-top 16px
      padding-left 30px
      .el-input
      .el-select
      .el-textarea
        width 280px
      .desc
        color $cf-blue2
  .left_style
    height calc(100vh - 227px)
    overflow-Y auto
    padding-bottom 20px
    min-width 500px
    border-right: 1px solid #ccc
    .chooseCommonIcon
      color $c-main
      cursor pointer
      margin 0 10px
  .grid-content
    margin-left 20px
  .right_style
    height calc(100vh - 227px)
    overflow-Y auto
    padding-right 20px
    .inviteBoxPreview
      width 90%
      margin 0 auto
      border 1px solid $c-main
      height: calc(100vh - 329px);
      position: relative;
      .inviteBox
        position absolute
        margin auto
        background-size cover
        width: 320px;
        height: 175px;
        border-radius: 5px;
        box-shadow: 0 0 3px 2px rgba(53, 53, 53, 0.1);
        border-width: 1px;
        border-color: #19CAA6;
        overflow: hidden;
        .previewClose
          width: 16px;
          height: 16px;
          cursor: pointer;
          position: absolute;
          color #fff
          top: 5px;
          right: 5px;
        .inviteBox_top
          height: 88px;
          padding: 10px 25px;
          .top_img
            display: inline-block;
            width: 70px;
            height: 84px;
            float: left;
            .photo_img
              max-width: 100%;
              max-height: 100%;
          .top_right
            display: inline-block;
            float: left;
            height: 84px;
            margin-left: 10px;
            width: 180px;
            position: relative;
            .Invite_words
              width: 100%;
              font-size: 16px;
              line-height: 18px;
              max-height: 36px;
              overflow: hidden;
              color: #fff;
              margin: 5px;
            .invite_buttons
              position: absolute;
              width: 100%;
              bottom: 5px;
              text-align: center;
              button
                color: #fff;
                outline: none;
                background: none;
                border: 1px #fff solid;
                height 24px
                line-height 24px
                border-radius: 4px;
                cursor: pointer;
                margin-left: 10px;
          .width100
            width 100%
        .inviteBox_bottom
          margin: 0 2px;
          height: 64px;
          width: 316px;
          position: relative;
          .sendtextarea
            box-sizing: border-box;
            outline: none;
            resize: none;
            position: absolute;
            left: 0;
            top: 0;
            border: none;
            width: 100%;
            height: 100%;
            padding: 10px 5px;
            margin: 0;
          button
            position: absolute;
            bottom: 3px;
            right: 4px;
            cursor: pointer;
            outline: none;
            background: #3fb8fd;
            color: #fff;
            border: none;
            padding: 2px 10px;
            border-radius: 5px;
</style>

